<template>
  <div class="dashboard-container">
    <el-page-header content="器件验证结果" style="margin-bottom: 20px" @back="goBack" />
    <el-divider />
    <el-tabs v-if="list && list.length > 0" v-model="activeName" tab-position="left" @tab-click="handleTabsChange">
      <el-tab-pane
        v-for="item in list"
        :key="item.ID"
        :value="item.test_time"
        :label="item.test_time"
        :name="item.test_time"
      >
        <TestReport v-if="activeName === item.test_time" :id="item.ID" :testTime="item.test_time" />
      </el-tab-pane>
    </el-tabs>
    <el-empty v-if="list === null || list.length === 0" icon="info" description="没有发现芯片的COS验证结果" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import waves from '@/directive/waves'
import { fetchTestReportHistoryList } from '@/api/test_report'
import TestReport from './Report'

export default {
  name: 'TestReports',
  directives: { waves },
  components: { TestReport },
  data() {
    return {
      chipId: this.$route.query.chipId,
      list: [],
      report: null,
      listLoading: true,
      activeName: ''
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleTabsChange(tab) {
      this.activeName = tab.name
    },
    goBack() {
      this.$router.go(-1)
    },
    fetchData() {
      this.listLoading = true
      fetchTestReportHistoryList({ chipId: this.$data.chipId }).then(response => {
        window.console.log(response.data)
        this.list = response.data
        if (this.list !== null && this.list.length > 0) {
          this.activeName = this.list[0].test_time
        }

        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px 0px 80px 0px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

</style>
